<template>
  <n-layout>
    <!-- 头部区域 -->
    <n-layout-header style="background-color: #f0f2f5; padding: 16px">
      <h2>AI 聊天</h2>
    </n-layout-header>

    <!-- 聊天内容区域 -->
    <n-layout-content
      style="padding: 16px; display: flex; justify-content: center; align-items: center"
    >
      <n-card style="width: 100%; max-width: 600px; overflow-y: auto">
        <n-list>
          <n-list-item v-for="(item, index) in messages" :key="index" style="margin-bottom: 12px">
            <template #header>
              <span style="font-weight: bold">{{ item.sender }}</span>
            </template>
            <div>{{ item.text }}</div>
          </n-list-item>
        </n-list>
      </n-card>
    </n-layout-content>

    <!-- 底部输入区域 -->
    <n-layout-footer style="background-color: #f0f2f5; padding: 16px">
      <div style="max-width: 600px; margin: 0 auto; display: flex">
        <n-input
          v-model:value="inputMsg"
          placeholder="请输入消息..."
          style="flex: 1"
          @keyup.enter="sendMessage"
        />
        <n-button type="primary" style="margin-left: 8px" @click="sendMessage"> 发送</n-button>
      </div>
    </n-layout-footer>
  </n-layout>
</template>

<script setup>
  import { ref } from 'vue';
  import { invoke } from '@tauri-apps/api/core';

  // 聊天记录，初始显示一条 AI 消息
  const messages = ref([{ sender: 'AI', text: '您好，有什么我可以帮您？' }]);

  // 输入框绑定的消息
  const inputMsg = ref('');

  // 模拟发送消息和 AI 回复
  const sendMessage = () => {
    if (!inputMsg.value.trim()) return;

    // 添加用户发送的消息
    messages.value.push({
      sender: '用户',
      text: inputMsg.value,
    });

    // 模拟 AI 回复（延时 1 秒）
    const userMessage = inputMsg.value;
    inputMsg.value = '';

    invoke('chat_stream', {})
      .then((result) => {
        console.log(result);
      })
      .catch((error) => {
        console.error(error);
      });
  };
</script>

<style scoped>
  /* 可根据需要自定义样式 */
</style>
